<script >
import uuid from 'uuid-js'
export default {
  name: 'TestHeader',
  methods: {
    addTodo(event) {
      if (event.target.value.trim() === '') {
        alert('输入为空')
        return
      }
      this.$bus.$emit('addTodo', {
        id: uuid.create().hex,
        text: event.target.value,
        done: false,
      })
      event.target.value = ''
    },
  }
}

</script>

<template>
  <div class="test-header">
    <input  @keyup.enter="addTodo($event)"/>
  </div>
</template>

<style scoped>

input{
  width: 100%;
  height: 60px;
  justify-content: center;
  align-items: center;
  border: 2px solid #eeeeee;
  border-radius: 10px;
}
input:focus {
  border: 2px solid #d9d9d9;
  outline: none;
}

.test-header{
  justify-content: center;
  align-items: center;
  width:  100%;
  height:  100px;
  padding: 10px;
}

</style>